<template>
  <div class="form-branch-container">
    <div
      v-if="props.payload.content.header"
      :class="['card-title-container',isPC ? 'card-title' : 'card-title-h5']"
    >
      {{ props.payload.content.header }}
    </div>
    <div
      v-if="props.payload.status === 0 && canSelect"
      v-for="(item, index) in props.payload.content.items"
      :key="index"
      :class="['form-branch-item', item.content ? '' : 'warning-item']"
      @click="listItemClick(item)"
    >
      {{ item.content || TUITranslateService.t('AIDesk.分支选项异常') }}
    </div>
  </div>
</template>

<script lang="ts">
import vue from '../../../../../../../adapter-vue';
import { TUITranslateService } from '../../../../../../../@aidesk/uikit-engine';
import { customerServicePayloadType } from '../../../../../../../interface';
import { isPC } from '../../../../../../../utils/env';
import { openSafeUrl } from "../../../../../../../utils/utils";

const { ref } = vue;

interface branchItem {
  content: string;
  desc: string;
  url?: string;
}

interface Props {
  payload: customerServicePayloadType;
}

export default {
  props: {
    payload: {
      type: Object as () => customerServicePayloadType,
      default: () => ({optionType: 0, taskInfo: { taskID: 0, nodeID: '', env: '' }, content: { header: '', items: [] }, status: 0}),
    },
  },
  emits: ['input-click'],
  setup(props: Props, { emit }) {
    let canSelect = ref(true);
    const listItemClick = (branch: branchItem): void => {
      if (!branch.content) {
        return;
      }
      if (branch.url) {
        openSafeUrl(branch.url);
      } else {
        let cloudCustomData;
        if (props.payload.optionType === 0) {
          cloudCustomData = '';
          canSelect.value = false;
        } else if (props.payload.optionType === 1) {
          cloudCustomData = JSON.stringify({
            BranchOptionInfo: {
              taskID: props.payload.taskInfo?.taskID,
              nodeID: props.payload.taskInfo?.nodeID,
              env: props.payload.taskInfo?.env,
            }
          });
        }
        emit('input-click', branch, cloudCustomData);
      }
    };

    return {
      props,
      canSelect,
      listItemClick,
      isPC,
      TUITranslateService,
    };
  },
};
</script>
<style lang="scss">
.form-branch-container {
  .card-title-container {
    padding: 12px;
    border-radius: 0 10px 10px;
    overflow-wrap: break-word;
    word-break: normal;
  }
  .card-title {
    background-color: #f3f4f7;
  }
  .card-title-h5 {
    background-color: #fff;
  }

  .form-branch-item {
    font-weight: 500;
    color: #1C66E5;
    background-color: #fff;
    border: 1px solid rgba(0, 110, 255, 0.3);
    padding: 12px;
    border-radius: 20px;
    margin-top: 8px;
    cursor: pointer;
    line-height: 16px;
    min-width: 50px;
    max-width: fit-content;
    text-align: center;
    overflow-wrap: break-word;
    word-break: normal;
  }
  .warning-item {
    color: #ff9800;
  }
}
</style>
